<template>
  <div class="form-designer-footer-comp">

    <template v-for="item in formDefinition.views">
      <a-dropdown :trigger="['contextmenu']" placement="topRight">
        <div :key="item.id" @click="() => change(item)" @dblclick="() => edit(item)"
             :class="['form-designer-footer-view-item', {'form-designer-footer-view-item-selected': item.id === innerValue}]">
          <div class="form-designer-footer-view-icon"/>
          {{ item.viewName }}
        </div>
        <a-menu slot="overlay">
          <a-menu-item key="delete" @click="() => remove(item)">
            <a-icon type="delete"/>
            删除
          </a-menu-item>
          <a-menu-item key="edit" @click="() => edit(item)">
            <a-icon type="form"/>
            重命名
          </a-menu-item>
          <a-menu-item key="copy" @click="() => copy(item)">
            <a-icon type="copy"/>
            复制
          </a-menu-item>
          <a-menu-item key="arrow-left" @click="() => toLeft(item)">
            <a-icon type="arrow-left"/>
            左移
          </a-menu-item>
          <a-menu-item key="arrow-right" @click="() => toRight(item)">
            <a-icon type="arrow-right"/>
            右移
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </template>
    <div @click="addNew" class="form-designer-footer-icon-button">
      <a-icon type="plus"/>
    </div>
    <ViewNameEditor ref="ViewNameEditor"/>
  </div>
</template>
<script>
import {createModelForVue, createProps, guid} from '@/utils';
import {createFormDefinition, createFormView} from '@/components/hhd/design/FormDesigner/types';
import ViewNameEditor from '@/components/hhd/design/FormDesigner/view/ViewNameEditor.vue';

export default {
  name: 'FormDesignerFooter',
  components: {ViewNameEditor},
  model: createModelForVue('selectedView'),
  props: {
    formDefinition: createProps(Object, createFormDefinition),
    selectedView: createProps(String),
  },
  methods: {
    change(item) {
      this.innerValue = item.id;
    },
    addNew() {
      let v = createFormView();
      this.formDefinition.views.push(v);
      this.innerValue = v.id;
    },
    getMainViewId() {
      let view = this.formDefinition.views.find(v => v.mainView);
      return view && view.id || undefined;
    },
    edit(item) {
      this.$refs.ViewNameEditor.edit(item);
    },
    toLeft(item) {
      let index = this.formDefinition.views.findIndex(i => item === i);
      if(index < 0) return;
      let index1 = index - 1;
      index1 = Math.max(0, index1);
      index1 = Math.min(index1, this.formDefinition.views.length - 1);
      this.swip(index, index1);
    },
    toRight(item) {
      let index = this.formDefinition.views.findIndex(i => item === i);
      if(index < 0) return;
      let index1 = index + 1;
      index1 = Math.max(0, index1);
      index1 = Math.min(index1, this.formDefinition.views.length - 1);
      this.swip(index, index1);
    },
    swip(index, index1) {
      if(index === index1) return;
      let temp = this.formDefinition.views[index];
      this.formDefinition.views[index] = this.formDefinition.views[index1];
      this.formDefinition.views[index1] = temp;
      this.formDefinition.views = [...this.formDefinition.views];
    },
    copy(item) {
      let res = JSON.parse(JSON.stringify(item));
      res.id = guid();
      res.viewName = res.viewName + " 副本";
      res.main = '0';
      this.formDefinition.views.push(res);
    },
    remove(item) {
      if (item.mainView) {
        this.$message.error('主视图无法删除');
        return;
      }
      this.$confirm({
        title: '确定删除吗?',
        content: '删除后不可恢复, 确定删除吗?',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          this.formDefinition.views = this.formDefinition.views.filter(v => v.id !== item.id);
          if (this.selectedView === item.id) {
            this.innerValue = this.getMainViewId();
          }
        }
      });
    },
  },
  computed: {
    innerValue: {
      get() {
        if (!this.selectedView) {
          let res = this.getMainViewId();
          this.$emit('change', res);
          return;
        }
        return this.selectedView;
      },
      set(v) {
        this.$emit('change', v);
      },
    }
  }
};
</script>